@import '../helper/utils';

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

$img_path: '../../res/img/sign/';

.checkIn {
  $length: 80%;
  $center: (100% - $length) / 2;
  $popTime: .5s;
  $sealTime: .2s;
  $moveTime: .1s;
  $interval: .4s;
  $pre_time: $popTime+$sealTime+$interval;
  text-align: center;
  width: $length;
  height: 100%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  left: $center;
  top: 0;
  @include vp(transition, all $popTime ease-in-out);
  -webkit-transition: all $popTime ease-in-out;
  &.show {
    & .img_checkIn_seal {
      @include vp('transform', 'rotate(0)scale(1)');
      opacity: 1;
    }
    & .img_checkIn_signIn {
      @include vp(transition, all .3s 1s ease-in-out);
      @include vp(transform, translateY(-100%));
    }
    & .css_rest_helper {
      @include vp(transition, all 1s $pre_time ease-in-out);
      opacity: 1;
    }
  }
  @at-root {
    .hel_seal_position {
      position: relative;
      text-align: center;
      width: 100%;
      height: 100%;
      overflow: hidden;
      @include vp(transition, all $moveTime $popTime+$sealTime+$interval linear);
      @at-root {
        .cky_checkIn_img{
          $o_w:205px/2;
          $o_h:259px/2;
          background: url($img_path + 'cgy.png') no-repeat;
          background-size: $o_w;
          width: $o_w;
          height: $o_h;
          position: absolute;
          left: 50%;
          top:10px;
          @include vp(transform,translateX(-50%));
          opacity:0;
          @at-root .checkIn.show #{&}{
            @include vp(transition,all .6s $pre_time linear);
            opacity:1;
          }
        }
        .bottom_checkIn_helper {
          box-sizing: border-box;
          height: 100%;
          margin-bottom: -55px;
          padding-top: 30px;
        }

        .css_rest_helper {
          opacity: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          @include vp(transform, translateX(-50%) translateY(-50%));
          width: 100%;
          @media screen and (max-height: 581px) {
            top: 63%;
          }
          .explain_checkIn_text {
            display: inline-block;
            font-size: 12px;
            color: #7a7a7a;
            @at-root {
              .dot_explain_word {
                font-size: 64px;
                vertical-align: middle;
                color: #7a7a7a;
              }

              .css_explain_helper {
                font-size: 12px;
                color: #7a7a7a;
              }
            }
          }
        }

      }

      @at-root {
        hr{
          @include vp(transform,scaleY(.5));
          width:80%;
          border-top: 1px solid;
        }
        .thank_checkIn_text {
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 15px;
          color: #323232;
        }

        .img_checkIn_seal {
          $originSealWidth: 434px;
          $originHeight: 177px;
          $magicTop: 27px;
          $factor:3;
          background: url($img_path + 'seal.png') no-repeat;
          background-size: $originSealWidth/$factor;
          width: $originSealWidth/$factor;
          height: $originHeight/$factor;
          position: relative;
          top: $magicTop;

          @include vp('transform', 'rotate(-25deg)scale(20)');
          @include vp('transition', all $sealTime $popTime linear);
          opacity: 0;
          @at-root {
            .shift_checkIn_helper {
              position: absolute;
              left: 50%;
              @include vp(transform, translateX(-50%) translateY(100%));
            }
          }
          @at-root .img_checkIn_signIn {
            $originWidth: 302px;
            $originHeight: 301px;
            $fitBlank: 40px;
            $factor:3;

            /*
                        @include vp(transform,translateX(-50%)translateY(100%));*/
            background: url($img_path + 'signIning.png') no-repeat center;
            background-size: $originWidth/$factor;
            width: $originSealWidth/$factor;
            height: $originHeight/$factor +3;
            margin: 0 auto $fitBlank auto;
          }
        }
        .position_button_helper{
          margin-top: 10px;
        }

        .navigator_checkIn_button {
          $magicColor: #8fa64d;
          $orignWidth: 79px;
          $originHeight: 28px;
          border: none;
          color: white;
          background-color: #1cabb8;
          font: 18px 'Micrisoft yahei';
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          padding: 10px;
          border-radius: 5px;
          &:first-child {
            float: left;
          }
          &:nth-child(2) {
            float: right;
          }

          @at-root {
            .text_navigator_detail {
              vertical-align: middle;
            }

            .arrow_navigator_img {
              display: inline-block;
              background: transparent url($img_path + 'arrow.png') no-repeat;
              background-size: $orignWidth/2;
              vertical-align: middle;
            }

            &:nth-child(1) > .arrow_navigator_img {
              width: $orignWidth/4;
              height: $originHeight/2;
            }

            &:nth-child(2) > .arrow_navigator_img {
              background-position: -$orignWidth/4 - 1;
              width: $orignWidth/4;
              height: $originHeight/2;
            }
          }
        }
      }
    }
  }
}

.share.show {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  height: 100%;
  width: 100%;
  z-index: 11;
  .dir_share_img {
    $origin_width: 311px;
    $origin_height: 418px;
    background: url($img_path + 'share.png') no-repeat;
    background-size: $origin_width/2;
    width: $origin_width/2;
    height: $origin_height/2;
    right: 10px;
    position: absolute;
  }
}
.congrats.show{
  position:absolute;
  width:100%;
  height:100%;
  background-color: rgba(0, 0, 0, .8);
  .reach_congrats_img{
    $o_w:464px;
    $o_h:292px;
    background:url($img_path + 'success.png');
    background-size:$o_w/2;
    width:$o_w/2;
    height:$o_h/2;
    margin:200px auto 50px auto;

  }
  .btn_congrats_img{
    $o_w:200px;
    $o_h:70px;
    background:url($img_path + 'btn.png');
    background-size:$o_w/2;
    width:$o_w/2;
    height:$o_h/2;
    margin:0 auto;
  }
}
